<template>
    <div class="page-wrap">
        <div class="table-header-wrap margin-b-16">
            <sys-set @success="sysSetChange" :defaultSystem="system" class="margin-b-16" />
            <a-divider class="full-divider-h" />
            <flexbox justify="flex-end" align="flex-start" class="table-header-cont">
                <flexbox justify="space-between" align="flex-start" style="flex: 1" v-if="modeType === 'table'">
                    <filter-form :system="system" @search="handleSearch" style="flex: 1" />
                    <flexbox>
                        <a-button type="primary" :disabled="!list.length" class="margin-r-16" @click="exportAllFile(0)">导出</a-button>
                        <a-tooltip title="表格列配置">
                            <column-setting :columns="settingColumns" @setColumns="setColumns" v-if="settingColumns.length" />
                        </a-tooltip>
                    </flexbox>
                </flexbox>
                <flexbox class="margin-l-16" style="font-size: 18px; cursor: pointer">
                    <flexbox justify="center" :class="modeType === 'table' ? 'bg-active' : ''" @click="handleChangeModeType('table')">
                        <a-tooltip title="表格展示">
                            <my-icon type="iconliebiao" />
                        </a-tooltip>
                    </flexbox>
                    <flexbox
                        justify="center"
                        :class="modeType === 'board' ? ['margin-l-8', 'bg-active'] : ['margin-l-8']"
                        @click="handleChangeModeType('board')"
                    >
                        <a-tooltip title="看板展示">
                            <my-icon type="iconkanban" />
                        </a-tooltip>
                    </flexbox>
                </flexbox>
            </flexbox>
        </div>
        <table-mode ref="tableModeRef" v-if="modeType === 'table'" />
        <board-mode ref="boardModeRef" :catalogCode="catalogCode" v-else />
    </div>
</template>

<script lang="ts">
import store from '@/store';
import { SysSet } from '@/components';
import { useRoute } from 'vue-router';
import FilterForm from './components/filterForm.vue';
import TableMode from './components/TableMode/index.vue';
import BoardMode from './components/BoardMode/index.vue';
import { ColumnSetting } from '@/components';
import { defineComponent, ref, unref, computed, reactive, toRefs } from 'vue';
export default defineComponent({
    name: 'myTaskRequire',
    components: {
        FilterForm,
        TableMode,
        BoardMode,
        ColumnSetting,
        SysSet
    },
    setup() {
        const tableModeRef = ref<any>();
        const boardModeRef = ref<any>();
        const modeType = ref('table');
        const system = ref<any>(null);
        const route = useRoute();
        const radioOptions = [
            {
                name: '全部',
                value: ''
            },
            {
                name: '待办',
                value: '1'
            },
            {
                name: '草稿',
                value: '4'
            }
        ];
        const state = reactive<any>({
            catalogCode: null
        });
        const selectedValue = ref(radioOptions[0].value);
        const list = computed(() => {
            if (unref(tableModeRef)) {
                return unref(tableModeRef).list;
            }
            return [];
        });
        const settingColumns = computed(() => {
            if (unref(tableModeRef)) {
                return unref(tableModeRef).settingColumns;
            }
            return [];
        });
        const handleSearch = (val) => {
            unref(tableModeRef) && unref(tableModeRef).handleSearch(val);
        };
        const exportAllFile = (val: 0 | 1) => {
            unref(tableModeRef).exportAllFile(val);
        };
        const setColumns = (list) => {
            unref(tableModeRef).setColumns(list);
        };
        const sysSetChange = (val) => {
            if (!store.getters.userInfo.employeeDTO.isShowSideTree) {
                system.value = val;
            }
            state.catalogCode = val;
            setTimeout(() => {
                if (unref(modeType) === 'table') {
                    unref(tableModeRef) && unref(tableModeRef).sysSetChange(val);
                } else {
                    unref(boardModeRef) && unref(boardModeRef).sysSetChange(val);
                }
            });
        };
        const handleChangeModeType = (type) => {
            modeType.value = type;
            setTimeout(() => {
                if (type === 'table') {
                    unref(tableModeRef) && unref(tableModeRef).sysSetChange(state.catalogCode);
                } else {
                    unref(boardModeRef) && unref(boardModeRef).sysSetChange();
                }
            });
        };
        if (route.query.systemId) {
            system.value = route.query.systemId;
        }
        return {
            tableModeRef,
            boardModeRef,
            ...toRefs(state),
            system,
            radioOptions,
            selectedValue,
            modeType,
            list,
            settingColumns,
            handleSearch,
            exportAllFile,
            setColumns,
            sysSetChange,
            handleChangeModeType
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 8px 24px 12px 24px;
    background: #fff;
    .table-title {
        font-size: 16px;
        font-weight: bold;
    }
    .bg-active {
        width: 30px;
        height: 30px;
        background: #f4f5f7;
    }
}
</style>
